<script setup lang="ts">
import { computed, onMounted, reactive, ref, watch } from 'vue';
import useStore from '@/stores';
import { Router, useRouter } from 'vue-router';
import { traduction } from '@/utils/language';
import $http from '@/utils/http-service';
import { openKvm } from './classes/kvmclient';
import { ElMessage as elMessage } from 'element-plus';
import { IconMore, IconXSolid } from '@computing/opendesign-icons';
import { capsLockState } from './classes/sharedStates';

import {
  IconHelpCircle,
  IconExpand,
  IconLessen,
  IconCaretUp,
  IconCaretDown,
} from '@computing/opendesign-icons';
import { IUploadConfig } from '@/model/base-interface';
import { UploadFile } from 'element-plus/es/components/upload/src/upload';
import VirtualKeyboard from './virtualKeyboard/index.vue';
import { AxiosResponse } from 'axios';
import { getStoreData } from '@/utils/composition';
const store = useStore();
const router: Router = useRouter();
const canvasRef = ref();
const showKeyBoard = ref(false);
const dialogConfig = reactive({
  title: traduction('HOME_PERFWARNING'),
  type: 'primary',
  content: '',
  id: 'kvmWarnModal',
  cancelButton: {
    hide: false,
  },
});
const dialogRef = ref();
const buttonRef = ref();
const divFullscreenRef = ref();

const language = computed(() => {
  return getStoreData('loct', 'locale');
});

const scope = reactive({
  currnetLang: store.state.loct.locale,
  fullscreenTitle: 'REMOTE_FULL_TIP',
  translate: traduction,
  slider: {
    scales: [],
    limits: {
      min: 0,
      max: 100,
    },
    value: 70,
    step: [],
    tooltip: {
      formatter(value: number) {
        return value + '%';
      },
    },
    change(value: number) {},
    changeStop(value: number) {},
  },
  systemIds: '',
  biosMediaOption: [
    {
      id: 0,
      value: 'NO_OVERRIDE_BOOT',
      label: traduction('HOME_NOT_CONFIGURED'),
    },
    {
      id: 1,
      value: 'HARD_DRIVER_BOOT',
      label: traduction('HOME_HDD'),
    },
    {
      id: 2,
      value: 'CD_ROM_BOOT',
      label: traduction('HOME_CD'),
    },
    {
      id: 3,
      value: 'REMOVEABLE_MEDIA_BOOT',
      label: traduction('HOME_LOPPY'),
    },
    {
      id: 4,
      value: 'PXE_BOOT',
      label: traduction('HOME_PXE'),
    },
    {
      id: 5,
      value: 'BIOS_SETUP',
      label: traduction('HOME_BIOS_SETUP'),
    },
  ],
  biosMediaOriginal: {
    value: '',
  },
  biosMediaSelected: {
    value: '',
  },
  biosMethod: [
    {
      key: 'HOME_BIOS_METHOD_SINGLE',
      id: 'single',
      disable: false,
    },
    {
      key: 'HOME_BIOS_METHOD_PERMANENT',
      id: 'permanent',
      disable: false,
    },
  ],
  biosMethodOriginal: {
    value: '',
  },
  biosMethodSelected: {
    value: 'single',
  },
  biosText: {
    text: 'COMMON_SAVE',
    disable: true,
    click() {},
  },
  biosMediaChange: () => {
    if (scope.biosMediaOriginal.value !== scope.biosMediaSelected.value) {
      scope.biosText.disable = false;
    }
  },
  biosMethodChange: () => {
    if (scope.biosMethodOriginal.value !== scope.biosMethodSelected.value) {
      scope.biosText.disable = false;
    }
  },
  cdDvd: [
    {
      key: 'HOME_IMAGE_FILE',
      id: 'iso',
      disable: false,
    },
    {
      key: 'HOME_LOCAL_DIRECTORY',
      id: 'location',
      disable: false,
    },
    {
      key: 'HOME_LOCAL_FOLDER',
      id: 'files',
      disable: false,
    },
  ],
  cdDvdSelected: {
    value: 'iso',
  },
  isoCdrom: {
    uploaderConfig: {
      action: 'myUploadUrl',
      isAutoUpload: false,
      accept: '.iso',
      disabled: false,
      onAddItem: (file: UploadFile, list: UploadFile[], msg?: any, upload?: any): boolean => {
        let type = file.name.substring(file.name.lastIndexOf('.') + 1);
        if (type !== 'iso') {
          return false;
        }
        return true;
      },
      onAddItemSuccess: (fileItem: UploadFile) => {},
      onRemove: (fileItem: any) => {
        scope._cdromConnect.disable = true;
      },
    } as IUploadConfig,
    upload() {},
  },
  _cdromConnect: {
    text: 'HOME_CONNECT',
    disable: true,
    click() {},
  },
  locationFile: {
    uploaderConfig: {
      action: 'myUploadUrl',
      isAutoUpload: false,
      disabled: false,
      onAddItem: (file: UploadFile, list: UploadFile[], msg?: any, upload?: any): boolean => {
        return true;
      },
      onAddItemSuccess: (fileItem: UploadFile) => {},
      onRemove: (fileItem: any) => {
        scope._cdromConnect.disable = true;
        scope._cdromInsert.disable = true;
      },
    } as IUploadConfig,
    upload() {},
  },
  locationFolders: {
    uploaderConfig: {
      disabled: false,
      foldersName: '',
      onAddItemSuccess: (fileItem: UploadFile) => {},
    },
    showErrorTip: false,
  },
  _cdromInsert: {
    text: 'HOME_INSERT',
    disable: true,
    click() {},
  },
  floppyState: 0,
  isoFloppy: {
    uploaderConfig: {
      action: 'myUploadUrl',
      isAutoUpload: false,
      accept: '.img',
      disabled: false,
      onAddItem: (file: UploadFile, list: UploadFile[], msg?: any, upload?: any): boolean => {
        let type = file.name.substring(file.name.lastIndexOf('.') + 1);
        if (type !== 'img' && type !== 'IMG') {
          return false;
        }
        return true;
      },
      onAddItemSuccess: (fileItem: UploadFile) => {},
      onRemove: (fileItem: any) => {
        scope._floppyConnect.disable = true;
      },
    } as IUploadConfig,
    upload() {},
  },
  _floppyConnect: {
    text: 'HOME_CONNECT',
    disable: true,
    click() {},
  },
  _floppyInsert: {
    text: 'HOME_INSERT',
    disable: true,
    click() {},
  },
  rChange: () => {},
  kvmParams: null as any,
  iconSize: 16,
  isExpand: false,
  isFixed: true,
  isRecording: false,
  customKey: '',
  key: [],
  keyCode: [],
  customData: [] as any[],
  canSave: false,
  tip: '',
  sendKey: () => {},
  dialogClickOK: () => {},
  dialogClickCancel: () => {},
  dialogClickSave: () => {},
  dialogClickDel: (keyArr: any[], keyCodeArr: any[]) => {},
  dialogClickCustom: (keyArr: any[], keyCodeArr: any[]) => {},
});

onMounted(() => {
  const params = window['kvmHtml5Info'];
  if (localStorage.getItem('H5ClientModel')) {
    const hash = window.location.hash;
    // 从 #/kvm_h5?host=主机0 中提取参数部分
    const questionMarkIndex = hash.indexOf('?');
    if (questionMarkIndex !== -1) {
      const queryString = hash.substring(questionMarkIndex + 1);
      const param = new URLSearchParams(queryString);
      scope.systemIds = Object.fromEntries(param);
    }
    const queryParams = {
      Mode: localStorage.getItem('H5ClientModel'),
      SystemId: scope.systemIds.systemIds !== undefined ? Number(scope.systemIds.systemIds) : 1,
    };
    $http.post('/UI/Rest/Services/KvmLogin', queryParams).then(
      response => {
        const res = response?.data;
        scope.kvmParams = {
          IPA: res?.KvmIP,
          local: store.state.loct.locale,
          port: res?.KvmPort,
          host: scope.systemIds.systemIds !== undefined ? Number(scope.systemIds.systemIds) : 1,
          privilege: res?.Privilege,
          title: res?.Title,
          token: res?.Token,
          sessionId: res?.SessionId,
          capsSync: Object.prototype.hasOwnProperty.call(res, 'CapsSync') ? res?.CapsSync : '1',
        };
        openKvm(scope, showMessage);
      },
      error => {
        showMessage('REMOTE_ERR_LINK_FAILED');
      },
    );
    localStorage.removeItem('H5ClientModel');
  } else if (params && params.kvmHtml5Info) {
    let kvmHtml5InfoJson;
    try {
      kvmHtml5InfoJson = JSON.parse(params.kvmHtml5Info as any);
    } catch (e) {
      kvmHtml5InfoJson = {};
    }
    scope.kvmParams = {
      IPA: kvmHtml5InfoJson.KvmIP,
      local: kvmHtml5InfoJson.Language,
      port: kvmHtml5InfoJson.KvmPort,
      host: scope.systemIds.systemIds !== undefined ? Number(scope.systemIds.systemIds) : 1,
      privilege: kvmHtml5InfoJson.Privilege,
      title: kvmHtml5InfoJson.Title,
      token: kvmHtml5InfoJson.Token,
      sessionId: kvmHtml5InfoJson.SessionId,
      capsSync: Object.prototype.hasOwnProperty.call(kvmHtml5InfoJson, 'CapsSync') ? kvmHtml5InfoJson?.CapsSync : '1',
    };
    window['kvmHtml5Info'] = {};

    openKvm(scope, showMessage);
    setTimeout(() => {
      localStorage.removeItem('kvmHtml5Info');
      sessionStorage.removeItem('kvmHtml5Info');
    }, 3000);
  } else if (sessionStorage.getItem('kvmHtml5Info') || localStorage.getItem('kvmHtml5Info')) {
    /**
     * 非web打开KVM(SSO,RedFish,IPMI);
     * 参照web打开时,kvmParams所需参数如下：
     * SN,verifyValue,mmVerifyValue,decrykey,local,
     * compress,vmm_compress,port,vmmPort,privilege,bladesize,IPA,IPB,verifyValueExt
     * 2022-4-25修改，变更如下
     * 1. decrykey从SSOHandler接口去获取，其他数据依然从LoccalStorage获SessionStorage获取
     * 2022-6-30标注
     * 对于key直连的方式，verifyValueExt，verifyValue接口返回值必须为字符串类型，否则连接不上KVM，导致KVM会话超时
     */
    const locHtml5Json =
      JSON.parse(sessionStorage.getItem('kvmHtml5Info') as any) ||
      JSON.parse(localStorage.getItem('kvmHtml5Info') as any);
    const redirect = locHtml5Json.redirect;
    const lang = locHtml5Json.lang;
    const kvmmode = locHtml5Json.kvmmode;
    const openway = locHtml5Json.openway;
    const token = locHtml5Json.kvmtoken;

    if (token) {
      scope.kvmParams = {
        IPA: locHtml5Json.KvmIP,
        local: locHtml5Json.Language,
        port: locHtml5Json.KvmPort,
        privilege: locHtml5Json.Privilege,
        title: locHtml5Json.Title,
        token: locHtml5Json.kvmtoken,
        sessionId: locHtml5Json.SessionId,
      };
      openKvm(scope, showMessage);
      setTimeout(() => {
        localStorage.removeItem('kvmHtml5Info');
        sessionStorage.removeItem('kvmHtml5Info');
      }, 3000);
      return;
    }

    let url = '';
    if (redirect) {
      // 带了redirect参数的是SSO跳转
      url = `/UI/Rest/SSOHandler?redirect=${redirect}&lang=${lang}&kvmmode=${kvmmode}&openway=${openway}&token=header`;
    } else {
      // 属key直连方式
      url = '/UI/Rest/KVMHandler?authParam=header';
      if (locHtml5Json.openWay) {
        url += `&openWay=${locHtml5Json.openWay}`;
      }
      if (locHtml5Json.lp) {
        url += `&lp=${locHtml5Json.lp}`;
      }
      if (locHtml5Json.lang) {
        url += `&lang=${locHtml5Json.lang}`;
      }
    }

    $http.get(url).then(
      (res: AxiosResponse<any>) => {
        scope.kvmParams = {
          IPA: res.data.kvmHtml5Info?.KvmIP,
          local: res.data.KvmHtml5Info?.Language,
          port: res.data.kvmHtml5Info?.KvmPort,
          host: scope.systemIds.systemIds !== undefined ? Number(scope.systemIds.systemIds) : 1,
          privilege: res.data.kvmHtml5Info?.Privilege,
          title: res.data.kvmHtml5Info?.Title,
          token: res.data.kvmHtml5Info?.Token,
          sessionId: res.data.kvmHtml5Info?.SessionId,
          capsSync: res.data.kvmHtml5Info?.CapsSync ?? '1',
        };
        // 接口有kvmHtml5Info就跳转到kvm连接，没有该属性就返回登录页
        if (res.data.kvmHtml5Info) {
          openKvm(scope, showMessage);
          setTimeout(() => {
            localStorage.removeItem('kvmHtml5Info');
            sessionStorage.removeItem('kvmHtml5Info');
          }, 3000);
        } else {
          localStorage.setItem('ssoError', 'error');
          router.push('/login');
        }
      },
      () => {
        localStorage.setItem('ssoError', 'error');
        router.push('/navigate/home');
      },
    );
  } else {
    showMessage('REMOTE_ERR_SESSION_EXPIRATION');
  }
  initCapsLock(capsLockState.value);
});
// 监听message提示信息
let msgInstance: any = null;
const uploadFoldersRef = ref();
function chooseFolders(): void {
  uploadFoldersRef.value.click();
}

function showMessage(
  contentInfo: string,
  id?: string,
  title?: string,
  type?: string,
  hideCancelBtn?: boolean,
) {
  dialogConfig.content = traduction(contentInfo);
  dialogConfig.id = id ? id : 'kvmCommonDialog';
  dialogConfig.cancelButton.hide = hideCancelBtn || false;
  dialogConfig.title = title ? traduction(title) : traduction('COMMON_CONFIRM');
  dialogConfig.type = type || 'primary';

  if (dialogConfig.id === 'keyboard') {
    if (Object.prototype.hasOwnProperty.call(dialogConfig, 'size')) {
      delete dialogConfig['size'];
    }
    dialogConfig['width'] = '600px';
    dialogConfig['saveButton'] = {
      hide: false,
    };
  } else {
    dialogConfig['size'] = 'small';
    dialogConfig['saveButton'] = {
      hide: true,
    };
  }

  dialogRef.value.show();
  dialogRef.value.saveDisable();
}

watch(
  () => scope.canSave,
  () => {
    if (scope.canSave) {
      dialogRef.value.saveEnable();
    }
  },
);

watch(
  () => scope.tip,
  newVal => {
    if (newVal !== '') {
      const tipArr = newVal.split('_');
      showInfo(tipArr[0], Number(tipArr[1]));
      scope.tip = '';
    }
  },
);

function showInfo(type: any, index: number) {
  let messageType = 'success' as any;
  let message = traduction('COMMON_SUCCESS');
  if (index !== 0) {
    messageType = 'error';
    if (type === 'save') {
      if (index === 3) {
        message = traduction('KVM_MAX_PLAN');
      } else if (index === 2) {
        message = traduction('KVM_SAME_PLAN');
      } else if (index === 4) {
        message = traduction('KVM_SAVE_SYSTEM_LOCK');
      } else {
        message = traduction('COMMON_FAILED');
      }
    } else {
      if (index === 2) {
        message = traduction('KVM_UNFIND_PLAN');
      } else if (index === 3) {
        message = traduction('KVM_DEL_SYSTEM_LOCK');
      } else {
        message = traduction('COMMON_FAILED');
      }
    }
  }
  if (msgInstance) {
    msgInstance.close();
    msgInstance = null;
  }
  msgInstance = elMessage({
    type: messageType,
    message,
    showClose: true,
    duration: 5000,
  });
}

function dialogClose(reason: boolean) {
  scope.canSave = false;
  dialogRef.value.hide();
  let flag = dialogConfig.id === 'mouseMode' || dialogConfig.id === 'keyboard' || dialogConfig.id === 'kvmImg' || dialogConfig.id === 'kvmPower';
  if (flag) {
    if (reason) {
      scope.dialogClickOK();
    } else {
      scope.dialogClickCancel();
    }
  }
}

function saveCustom(reason: boolean) {
  scope.dialogClickSave();
}

function sendCustom(item: any) {
  // 传到后台生效的为keyCode，key值不产生影响，此处为统一收发数据
  let valueArr = item.value.split('+');
  let arr = item.label.split('+');
  for (let j = 0; j < arr.length; j++) {
    if (arr[j] === '') {
      arr.splice(j, 1);
    }
  }
  let result = arr.map((i: string, index: number) => {
    if (i === 'Space') {
      return ' ';
    }
    if (i === '') {
      return '+';
    }
    if (Number(valueArr[index]) === 91 || Number(valueArr[index]) === 92) {
      return 'Meta';
    }
    return i;
  });
  scope.dialogClickCustom(result, item.value.split('+'));
  scope.canSave = false;
  dialogRef.value.hide();
}

function delCustom(item: any) {
  let arr = item.label.split('+');
  let result = [];
  for (let i = 0; i < arr.length; i++) {
    if (arr[i] !== '') {
      result.push(arr[i]);
    } else {
      result.push('+');
      i++;
    }
  }
  scope.dialogClickDel(result, item.value.split('+'));
}
function menuExpand() {
  scope.isExpand = !scope.isExpand;
  scope.iconSize = scope.isExpand ? 24 : 16;
}

function uploadFolders(evt: Event): void {
  if (evt?.target && evt?.target['files']?.length > 0 && evt?.target['files']?.length < 10000) {
    scope.locationFolders.showErrorTip = false;
    let files = evt.target['files'];
    const folderName = files[0].webkitRelativePath.split('/');
    scope.locationFolders.uploaderConfig.foldersName = folderName[0];
    scope.locationFolders.uploaderConfig.onAddItemSuccess(files);
    document.getElementById('uploadFolders').value = '';
  } else if (evt?.target && evt?.target['files']?.length > 10000) {
    // 处理文件夹内文件数量大于10000个时的场景
    scope.locationFolders.showErrorTip = true;
    return;
  }
}

function initCapsLock(state: boolean) {
  const capsIcon = document.getElementById('caps_lock_icon') as HTMLElement;
  capsIcon.style.display = state ? 'inline' : 'none';
}

watch(capsLockState, initCapsLock);
</script>
<template>
  <div class="main">
    <div
      class="content"
      :class="{
        'expand-content': scope.iconSize === 24
      }"
    >
      <div id="divFullscreen" ref="divFullscreenRef">
        <div>
          <div id="toolbar" class="float-toolbar" :class="`${language}-language`">
            <div class="float-toolbar-panel">
              <ul class="main-menu">
                <li id="btn_float">
                  <el-tooltip
                    :disabled="scope.isExpand"
                    :content="$t('REMOTE_BUTTION_FLOAT')"
                    placement="bottom"
                    :append-to-body="false"
                    :hide-after="0"
                    transition="none"
                    trigger-keys
                  >
                    <el-icon class="main-menu-item" :size="scope.iconSize">
                      <i v-if="scope.isFixed" class="html5-icon-uniE901"></i>
                      <i v-else class="html5-icon-2"></i>
                    </el-icon>
                  </el-tooltip>
                  <span
                    v-if="scope.isExpand"
                    v-t="'REMOTE_BUTTION_FLOAT'"
                    class="expand-title"
                  ></span>
                </li>
                <li
                  id="btn_fullscreen"
                  :disabled="scope.fullscreenTitle !== 'REMOTE_FULL_TIP_NOT_SUPPORT'"
                >
                  <el-tooltip
                    :disabled="scope.isExpand"
                    :content="$t(scope.fullscreenTitle)"
                    placement="bottom"
                    :append-to-body="false"
                    :hide-after="0"
                    transition="none"
                    trigger-keys
                  >
                    <el-icon class="main-menu-item" :size="scope.iconSize">
                      <IconExpand v-if="scope.fullscreenTitle !== 'REMOTE_EXIT_FULL_TIP'" />
                      <IconLessen v-else />
                    </el-icon>
                  </el-tooltip>
                  <span
                    v-if="scope.isExpand"
                    v-t="scope.fullscreenTitle"
                    class="expand-title"
                  ></span>
                </li>
                <li id="btn_power">
                  <el-tooltip
                    :disabled="scope.isExpand"
                    :content="$t('HOME_POWER_CONTROL')"
                    placement="bottom"
                    :append-to-body="false"
                    :hide-after="0"
                    transition="none"
                    trigger-keys
                  >
                    <el-icon class="main-menu-item" :size="scope.iconSize">
                      <i class="icon-kaiguan"></i>
                    </el-icon>
                  </el-tooltip>
                  <span
                    v-if="scope.isExpand"
                    v-t="'HOME_POWER_CONTROL'"
                    class="expand-title"
                  ></span>
                  <div id="power_submenu" class="sub-menu">
                    <ul>
                      <li>
                        <span reskey="NORMAL_POWERON_EX">{{ $t('HOME_POWER_UP') }}</span>
                      </li>
                      <li>
                        <span reskey="FORCE_POWEROFF_EX">{{ $t('HOME_FORCED_POWER_DOWN') }}</span>
                      </li>
                      <li>
                        <span reskey="NORMAL_POWEROFF_EX">{{ $t('POWER_OFF') }}</span>
                      </li>
                      <li>
                        <span reskey="COLD_START">{{ $t('HOME_FORCED_RESTART') }}</span>
                      </li>
                      <li>
                        <span reskey="SAFE_RESTART">{{ $t('POWER_SAFE_RESTART') }}</span>
                      </li>
                      <li>
                        <span reskey="SAFE_RESET">{{ $t('HEADER_POWER_FORECE_OFF_ON') }}</span>
                      </li>
                    </ul>
                  </div>
                </li>
                <li id="btn_boot">
                  <el-tooltip
                    :disabled="scope.isExpand"
                    :content="$t('REMOTE_BOOTOPTION_SETUP')"
                    placement="bottom"
                    :append-to-body="false"
                    :hide-after="0"
                    transition="none"
                    trigger-keys
                  >
                    <el-icon class="main-menu-item" :size="scope.iconSize">
                      <i class="html5-icon-startup"></i>
                    </el-icon>
                  </el-tooltip>
                  <span
                    v-if="scope.isExpand"
                    v-t="'REMOTE_BOOTOPTION_SETUP'"
                    class="expand-title"
                  ></span>
                  <div id="boot_submenu" class="sub-menu bios-menu">
                    <div class="bios-media">
                      <span class="bios-method">
                        {{ $t('HOME_BIOS_MEDIA') }}
                      </span>
                      <div>
                        <el-select
                          v-model="scope.biosMediaSelected.value"
                          class="left-align"
                          :teleported="false"
                          :placeholder="$t('HOME_BIOS_MEDIA_PLACEHOLDER')"
                          style="width: 240px"
                          @change="scope.biosMediaChange"
                        >
                          <el-option
                            v-for="item in scope.biosMediaOption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                            <li>
                              <span :reskey="item.value">{{ item.label }}</span>
                            </li>
                          </el-option>
                        </el-select>
                      </div>
                    </div>
                    <div class="bios-media">
                      <span class="bios-method" reskey="CD_DVD_DRIVER">
                        {{ $t('HOME_BIOS_METHOD') }}
                      </span>
                      <el-radio-group
                        v-model="scope.biosMethodSelected.value"
                        class=""
                        @change="scope.biosMethodChange()"
                      >
                        <el-radio
                          :label="scope.biosMethod[0].id"
                          :disabled="scope.biosMethod[0].disable"
                        >
                          {{ $t(scope.biosMethod[0].key) }}
                        </el-radio>
                        <el-radio
                          :label="scope.biosMethod[1].id"
                          :disabled="scope.biosMethod[1].disable"
                        >
                          {{ $t(scope.biosMethod[1].key) }}
                        </el-radio>
                      </el-radio-group>
                    </div>
                    <el-button
                      id="bios_save"
                      type="primary"
                      class="btn-op"
                      size="small"
                      :disabled="scope.biosText.disable"
                      :title="$t(scope.biosText.text)"
                    >
                      {{ $t(scope.biosText.text) }}
                    </el-button>
                  </div>
                </li>
                <li id="btn_keyboard">
                  <el-tooltip
                    :disabled="scope.isExpand"
                    :content="$t('REMOTE_KEYCOMBINATION')"
                    placement="bottom"
                    :append-to-body="false"
                    :hide-after="0"
                    transition="none"
                    trigger-keys
                  >
                    <el-icon class="main-menu-item" :size="scope.iconSize">
                      <i class="html5-icon-composite-key"></i>
                    </el-icon>
                  </el-tooltip>
                  <span
                    v-if="scope.isExpand"
                    v-t="'REMOTE_KEYCOMBINATION'"
                    class="expand-title"
                  ></span>
                  <div id="keyboard_submenu" class="sub-menu">
                    <ul>
                      <li>
                        <span reskey="KVM_KEY_ALT_TAB">{{ $t('HOME_KEY_ALT_TAB') }}</span>
                      </li>
                      <li>
                        <span reskey="KVM_KEY_CTRL_ESC">{{ $t('HOME_KEY_CTRL_ESC') }}</span>
                      </li>
                      <li>
                        <span reskey="KVM_KEY_CTRL_SHIFT">{{ $t('HOME_KEY_CTRL_SHIFT') }}</span>
                      </li>
                      <li>
                        <span reskey="KVM_KEY_CTRL_SPACE">{{ $t('HOME_KEY_CTRL_SPACE') }}</span>
                      </li>
                      <li>
                        <span reskey="KVM_KEY_CTRL_ALT_DEL">{{ $t('HOME_KEY_CTRL_ALT_DEL') }}</span>
                      </li>
                      <li id="btn_keyboard_def">
                        <span reskey="REMOTE_SELF_DEFINE">{{ $t('HOME_SELF_DEFINE') }}</span>
                      </li>
                    </ul>
                  </div>
                </li>
                <li id="btn_mouse">
                  <el-tooltip
                    :disabled="scope.isExpand"
                    :content="$t('REMOTE_MOUSE_MANAGER')"
                    placement="bottom"
                    :append-to-body="false"
                    :hide-after="0"
                    transition="none"
                    trigger-keys
                  >
                    <el-icon class="main-menu-item" :size="scope.iconSize">
                      <i class="html5-icon-uniE904"></i>
                    </el-icon>
                  </el-tooltip>
                  <span
                    v-if="scope.isExpand"
                    v-t="'REMOTE_MOUSE_MANAGER'"
                    class="expand-title"
                  ></span>
                  <div id="mouse_submenu" class="sub-menu">
                    <ul>
                      <li>
                        <span reskey="REMOTE_MOUSE_ACCELERATION">
                          {{ $t('HOME_MOUSE_ACCELERATION') }}
                        </span>
                      </li>
                      <li>
                        <span reskey="REMOTE_SINGLE_MOUSE">{{ $t('HOME_SINGLE_MOUSE') }}</span>
                      </li>
                      <li>
                        <span reskey="REMOTE_KEY_MOUSE_RESET">
                          {{ $t('HOME_KEY_MOUSE_RESET') }}
                        </span>
                      </li>
                      <li class="select">
                        <span reskey="REMOTE_KEY_CAPS_SYNC">
                          {{ $t('HOME_KEY_CAPS_SYNC') }}
                        </span>
                      </li>
                    </ul>
                  </div>
                </li>
                <li id="btn_cdrom">
                  <el-tooltip
                    :disabled="scope.isExpand"
                    :content="$t('REMOTE_CD_CDROMS')"
                    placement="bottom"
                    :append-to-body="false"
                    :hide-after="0"
                    transition="none"
                    trigger-keys
                  >
                    <el-icon class="main-menu-item" :size="scope.iconSize">
                      <i class="html5-icon-uniE908"></i>
                    </el-icon>
                  </el-tooltip>
                  <span v-if="scope.isExpand" v-t="'REMOTE_CD_CDROMS'" class="expand-title"></span>
                  <div id="cdrom_submenu" class="sub-menu upload-menu">
                    <span class="upload" reskey="CD_DVD_DRIVER">
                      {{ $t('HOME_CD_DVD_DRIVER') }}
                    </span>

                    <el-radio-group
                      v-model="scope.cdDvdSelected.value"
                      class="upload"
                      @change="scope.rChange()"
                    >
                      <el-radio :label="scope.cdDvd[0].id" :disabled="scope.cdDvd[0].disable">
                        {{ $t(scope.cdDvd[0].key) }}
                      </el-radio>
                      <el-radio :label="scope.cdDvd[1].id" :disabled="scope.cdDvd[1].disable">
                        {{ $t(scope.cdDvd[1].key) }}
                      </el-radio>
                      <el-radio :label="scope.cdDvd[2].id" :disabled="scope.cdDvd[2].disable">
                        {{ $t(scope.cdDvd[2].key) }}
                      </el-radio>
                    </el-radio-group>

                    <div class="upload">
                      <span v-show="scope.cdDvdSelected.value !== 'files'" class="upload-text">
                        {{ $t('HOME_UPLOAD_FILE') }}
                      </span>
                      <span v-show="scope.cdDvdSelected.value === 'files'" class="upload-text">
                        {{ $t('HOME_UPLOAD_FILES') }}
                      </span>
                      <FileUpload
                        v-if="scope.cdDvdSelected.value === 'iso'"
                        :data="scope.isoCdrom.uploaderConfig"
                      ></FileUpload>
                      <FileUpload
                        v-else-if="scope.cdDvdSelected.value === 'location'"
                        :data="scope.locationFile.uploaderConfig"
                      ></FileUpload>
                      <div
                        v-else
                        class="upload-folders"
                        :title="scope.locationFolders.uploaderConfig.foldersName"
                        @click.self="chooseFolders"
                      >
                        <input
                          id="uploadFolders"
                          ref="uploadFoldersRef"
                          class="origin-input"
                          type="file"
                          value=""
                          name="saveFile"
                          webkitdirectory
                          @change="uploadFolders($event)"
                        />
                        <el-input
                          v-model="scope.locationFolders.uploaderConfig.foldersName"
                          class="showed-input"
                          :placeholder="$t('ADD_FILE')"
                          :disabled="scope.locationFolders.uploaderConfig.disabled"
                          :readonly="true"
                        >
                          <template #suffix>
                            <el-icon class="el-input__icon">
                              <IconMore />
                            </el-icon>
                          </template>
                        </el-input>
                        <span v-if="scope.locationFolders.showErrorTip" class="number-error">
                          {{ $t('REMOTE_ERR_FILE_NUMBER') }}
                        </span>
                      </div>
                      <el-button
                        id="cdromInsert"
                        class="btn-op file-button"
                        :disabled="scope._cdromInsert.disable"
                        :title="$t(scope._cdromInsert.text)"
                        @click="scope._cdromInsert.click()"
                      >
                        {{ $t(scope._cdromInsert.text) }}
                      </el-button>
                    </div>

                    <el-button
                      id="cdromConnect"
                      type="primary"
                      class="btn-op"
                      size="small"
                      :disabled="scope._cdromConnect.disable"
                      :title="$t(scope._cdromConnect.text)"
                      @click="scope._cdromConnect.click()"
                    >
                      {{ $t(scope._cdromConnect.text) }}
                    </el-button>
                  </div>
                </li>
                <li v-if="false" id="btn_floppy" ref="buttonRef">
                  <el-tooltip
                    :disabled="scope.isExpand"
                    :content="$t('REMOTE_FLP_FLOPPY')"
                    placement="bottom"
                    :append-to-body="false"
                    :hide-after="0"
                    transition="none"
                    trigger-keys
                  >
                    <el-icon id="floppy_img_btn" class="main-menu-item" :size="scope.iconSize">
                      <i class="html5-icon-floppy-drive"></i>
                    </el-icon>
                  </el-tooltip>
                  <span v-if="scope.isExpand" v-t="'REMOTE_FLP_FLOPPY'" class="expand-title"></span>
                  <div id="floppy_submenu" class="sub-menu upload-menu">
                    <span class="upload" reskey="FLOPPY_DRIVER">{{ $t('HOME_FLP_FLOPPY') }}</span>

                    <div class="upload">
                      <span v-t="'HOME_IMAGE_FILE'" class="upload-text"></span>
                      <FileUpload :data="scope.isoFloppy.uploaderConfig"></FileUpload>
                      <el-button
                        id="floppyInsert"
                        v-t="$t(scope._floppyInsert.text)"
                        class="btn-op file-button"
                        :disabled="scope._floppyInsert.disable"
                        :title="$t(scope._floppyInsert.text)"
                        @click="scope._floppyInsert.click()"
                      ></el-button>
                    </div>

                    <el-button
                      id="floppyConnect"
                      class="btn-op"
                      type="primary"
                      size="small"
                      :disabled="scope._floppyConnect.disable"
                      :title="$t(scope._floppyConnect.text)"
                      @click="scope._floppyConnect.click()"
                    >
                      {{ $t(scope._floppyConnect.text) }}
                    </el-button>
                  </div>
                  <el-tooltip
                    v-if="scope.floppyState === 0"
                    id="floopy_disabled_tip"
                    class="sub-menu-tip"
                    :content="$t('REMOTE_FLP_FLOPPY_DISABLE_TIP')"
                    :virtual-ref="buttonRef"
                    trigger="click"
                    placement="bottom"
                    virtual-triggering
                    :hide-after="0"
                    transition="none"
                    trigger-keys
                  ></el-tooltip>
                </li>
                <li id="btn_record">
                  <el-tooltip
                    :disabled="scope.isExpand"
                    :content="$t('REMOTE_KINESCOPE')"
                    placement="bottom"
                    :append-to-body="false"
                    trigger-keys
                  >
                    <el-icon
                      class="main-menu-item"
                      :class="scope.isRecording ? 'recording-img' : 'record-img'"
                      :size="scope.iconSize"
                    >
                      <img
                        v-show="scope.isRecording"
                        src="/src/assets/assets-bmc/default/html5-video.svg"
                      />
                      <i v-show="!scope.isRecording" class="html5-icon-uniE906"></i>
                    </el-icon>
                  </el-tooltip>
                  <span v-if="scope.isExpand" v-t="'REMOTE_KINESCOPE'" class="expand-title"></span>
                </li>
                <li id="btn_keyboardlayout">
                  <el-tooltip
                    :disabled="scope.isExpand"
                    :content="$t('REMOTE_KEYBOARD_LAYOUT')"
                    placement="bottom"
                    :append-to-body="false"
                    :hide-after="0"
                    transition="none"
                    trigger-keys
                  >
                    <el-icon class="main-menu-item" :size="scope.iconSize">
                      <i class="html5-icon-keyboard"></i>
                    </el-icon>
                  </el-tooltip>
                  <span
                    v-if="scope.isExpand"
                    v-t="'REMOTE_KEYBOARD_LAYOUT'"
                    class="expand-title"
                  ></span>
                  <div id="keyboardlayout_submenu" class="sub-menu">
                    <ul>
                      <li>
                        <span reskey="REMOTE_EN_KEYBOARDKVM">{{ $t('HOME_EN_KEYBOARD') }}</span>
                      </li>
                      <li>
                        <span reskey="REMOTE_JP_KEYBOARDKVM">{{ $t('HOME_JP_KEYBOARD') }}</span>
                      </li>
                      <li>
                        <span reskey="REMOTE_FR_KEYBOARDKVM">{{ $t('HOME_FR_KEYBOARDKVM') }}</span>
                      </li>
                      <li>
                        <span reskey="REMOTE_IT_KEYBOARDKVM">{{ $t('HOME_IT_KEYBOARD') }}</span>
                      </li>
                      <li>
                        <span reskey="REMOTE_DE_KEYBOARDKVM">{{ $t('HOME_DE_KEYBOARD') }}</span>
                      </li>
                    </ul>
                  </div>
                </li>
                <li id="btn-vir-keyboard" @click="showKeyBoard = true">
                  <el-tooltip
                    :disabled="scope.isExpand"
                    :content="$t('VIRTUAL_kEYBOARD')"
                    placement="bottom"
                    :append-to-body="false"
                    trigger-keys
                  >
                    <el-icon class="main-menu-item" :size="scope.iconSize">
                      <i class="keyboard-virtual"></i>
                    </el-icon>
                  </el-tooltip>
                  <span
                    v-if="scope.isExpand"
                    v-t="'VIRTUAL_kEYBOARD'"
                    class="expand-title"
                  ></span>
                </li>
                <li id="btn_help">
                  <el-tooltip
                    :disabled="scope.isExpand"
                    :content="$t('REMOTE_HELP_DOCUMENT')"
                    placement="bottom"
                    :append-to-body="false"
                    :hide-after="0"
                    transition="none"
                    trigger-keys
                  >
                    <el-icon class="main-menu-item" :size="scope.iconSize">
                      <IconHelpCircle />
                    </el-icon>
                  </el-tooltip>
                  <span
                    v-if="scope.isExpand"
                    v-t="'REMOTE_HELP_DOCUMENT'"
                    class="expand-title"
                  ></span>
                </li>
                <li id="caps_lock_icon">
                  <el-icon class="main-menu-item" :size="scope.iconSize">
                    <i class="icon-caps-lock"></i>
                  </el-icon>
                </li>
              </ul>
              <div class="tool-bar-resolution-slider ja-tool-bar-resolution-slider">
                <div class="vedioResolution vedioResolution-down">
                  {{ $t('HOME_SMOOTH') }}
                </div>
                <div id="slider_definition" class="fr mt3">
                  <el-slider
                    v-model="scope.slider.value"
                    :scales="scope.slider.scales"
                    :min="scope.slider.limits.min"
                    :max="scope.slider.limits.max"
                    @input="scope.slider.change($event)"
                    @change="scope.slider.changeStop($event)"
                  ></el-slider>
                </div>
                <div class="vedioResolution vedioResolution-up">
                  {{ $t('HOME_CLEAR') }}
                </div>
              </div>
              <div
                v-if="scope.fullscreenTitle === 'REMOTE_EXIT_FULL_TIP'"
                class="expand-button"
                @click="menuExpand()"
              >
                <el-icon :size="12">
                  <IconCaretDown v-if="!scope.isExpand" />
                  <IconCaretUp v-else />
                </el-icon>
              </div>
            </div>
          </div>
          <canvas
            id="image_panel"
            ref="canvasRef"
            tabindex="0"
            class="image"
            width="1024"
            height="768"
          ></canvas>
          <div v-if="scope.systemIds !== undefined" id="active_imgs_panel" class="active-imgs">
            <div class="active-img">
              <img src="/src/assets/common/image/load-fail.png" />
              <div class="active-img-host">{{ $t('HOME_KVM_IDLE_HOST') }}</div>
              <el-button id="img_host_btn" type="primary">
                <span class="img-host-btn-text">{{ $t('HOME_KVM_ACTIVE_IMG') }}</span>
              </el-button>
            </div>
          </div>
        </div>
        <div id="status_panel" class="status status-normal">
          <div class="fl status-info3">
            <span id="status_title" title="title"></span>
            <span v-if="scope.systemIds !== undefined" class="host-info">
              <span class="host-status">
                <span id="host_name" class="host"></span>
              </span>
            </span>
          </div>
          <div class="fr status-info">
            <span reskey="KVM_FLAG_FRAME">{{ $t('HOME_FLAG_FRAME') }}</span>
            <span id="frame_rate">0</span>
          </div>
          <div class="fr status-info">
            <span reskey="KVM_FLAG_SEND">{{ $t('HOME_FLAG_SEND') }}</span>
            <span id="send_bytes">0</span>
          </div>
          <div class="fr status-info">
            <span reskey="KVM_FLAG_RECV">{{ $t('HOME_FLAG_RECV') }}</span>
            <span id="recive_bytes">0</span>
          </div>
        </div>
        <Dialog
          id="customDialog"
          ref="dialogRef"
          :config="dialogConfig"
          @close="dialogClose"
          @save="saveCustom"
        >
          <template v-if="dialogConfig.id === 'keyboard'" #other>
            <div>
              <div class="txt-box">
                <el-input id="txt_define1" class="custom-key" />
                <div class="key-plus">+</div>
                <el-input id="txt_define2" class="custom-key" />
                <span class="key-plus">+</span>
                <el-input id="txt_define3" class="custom-key" />
                <span class="key-plus">+</span>
                <el-input id="txt_define4" class="custom-key" />
                <span class="key-plus">+</span>
                <el-input id="txt_define5" class="custom-key" />
                <span class="key-plus">+</span>
                <el-input id="txt_define6" class="custom-key" />
              </div>
              <div class="keyboard-btn">
                <div class="title">{{ $t('HOME_KEY_TIP') }}</div>
                <el-button
                  id="Meta_91"
                  class="key-button none-margin"
                  :title="$t(scope._cdromInsert.text)"
                >
                  <div id="Meta_91">LWIN</div>
                </el-button>
                <el-button id="Meta_92" class="key-button" :title="$t(scope._cdromInsert.text)">
                  <div id="Meta_92">RWIN</div>
                </el-button>
                <el-button id="Alt_18" class="key-button" :title="$t(scope._cdromInsert.text)">
                  <div id="Alt_18">LALT</div>
                </el-button>
                <el-button id="Control_17" class="key-button" :title="$t(scope._cdromInsert.text)">
                  <div id="Control_17">LCTRL</div>
                </el-button>
                <el-button id="AltGraph_18" class="key-button" :title="$t(scope._cdromInsert.text)">
                  <div id="AltGraph_18">RALT</div>
                </el-button>
                <el-button
                  id="Control_17_Right"
                  class="key-button"
                  :title="$t(scope._cdromInsert.text)"
                >
                  <div id="Control_17_Right">RCTRL</div>
                </el-button>
                <el-button
                  id="ScrollLock_145"
                  class="key-button bottom-btn none-margin"
                  :title="$t(scope._cdromInsert.text)"
                >
                  <div id="ScrollLock_145">SCR</div>
                </el-button>
                <el-button
                  id="PrintScreen_44"
                  class="key-button bottom-btn"
                  :title="$t(scope._cdromInsert.text)"
                >
                  <div id="PrintScreen_44">PS</div>
                </el-button>
                <el-button
                  id="Insert_45"
                  class="key-button bottom-btn"
                  :title="$t(scope._cdromInsert.text)"
                >
                  <div id="Insert_45">INS</div>
                </el-button>
                <el-button
                  id="Delete_46"
                  class="key-button bottom-btn"
                  :title="$t(scope._cdromInsert.text)"
                >
                  <div id="Delete_46">DEL</div>
                </el-button>
              </div>
              <div class="keyboard-custom" v-if="scope.customData.length > 0">
                <div class="title">{{ $t('常用按键') }}</div>
                <div class="btn-list">
                  <div
                    class="custom-btn"
                    v-for="item in scope.customData"
                    :key="item.value"
                    @click="sendCustom(item)"
                  >
                    <span>{{ item.label }}</span>
                    <el-icon class="icon-x-solid" @click.stop="delCustom(item)">
                      <IconXSolid />
                    </el-icon>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </Dialog>
        <template v-if="divFullscreenRef">
          <teleport :to="divFullscreenRef">
            <VirtualKeyboard
              v-if="showKeyBoard"
              @close="showKeyBoard = false"
              @click-bodard="scope.sendKey"
            />
          </teleport>
        </template>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.main {
  position: relative;
  top: 0;
  width: 100%;
  height: 100%;
  min-height: 919px;
  background: var(--o-border-color-light);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  .content {
    position: relative;
    padding: 24px;
    margin: auto;
    width: fit-content;
    top: 50%;
    transform: translateY(-50%);
    background: var(--o-bg-color-light);
    border-radius: 4px;
    .el-icon {
      color: #ffffff;
    }
    .el-icon:hover {
      color: var(--o-color-primary-secondary);
    }

    .icon-kaiguan:before {
      color: unset;
    }

    .expand-button {
      position: absolute;
      width: 28px;
      height: 12px;
      top: 64px;
      left: 50%;
      transform: translateX(-50%);
      background-color: var(--o-color-primary);
      .el-icon {
        margin-left: 8px;

        &:hover {
          color: #ffffff;
        }
      }
    }

    .float-toolbar {
      position: absolute;
      left: calc((100% - 800px) / 2);
      padding-left: 16px;
      padding-right: 16px;
      width: 800px;
      border-radius: 4px;
      border-top: 40px solid #3e4551;
      border-right: 40px solid transparent;
      border-left: 40px solid transparent;
      height: 0;
      z-index: 2;

      &.ja-language {
        left: calc((100% - 850px) / 2);
        width: 850px;
      }
    }

    .float-toolbar-panel {
      position: relative;
      bottom: 64px;
    }

    .main-menu > li {
      position: inherit;
      margin-right: 16px;
      float: left;
      cursor: pointer;
    }

    .sub-menu {
      background: var(--o-bg-color-base);
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.24);
      border-radius: 4px;
      position: absolute;
      text-align: center;
      margin-left: -16px;
      margin-top: 12px;
      display: none;
      padding: 4px 0;
      min-width: 145px;
      z-index: 1;
    }

    .jslider-value-from {
      display: none;
    }

    .sub-menu table {
      margin: 12px 16px;
    }

    .sub-menu td {
      position: relative;
      text-align: left;
      white-space: nowrap;
      border-top: 4px solid transparent;
      border-bottom: 4px solid transparent;
      .inputSelect {
        position: absolute;
        right: 8px;
        top: 3px;
        z-index: 1;
      }
    }
    #btn-vir-keyboard.display-none {
      display: none;
    }

    .sub-menu > ul > li {
      white-space: nowrap;
      padding: 3px 16px;
      border: 1px solid transparent;
      text-align: left;
    }

    .sub-menu li:hover {
      color: #ffffff;
      background: var(--o-color-primary-secondary);
      cursor: pointer;
    }

    .sub-menu li:first-child {
      border-top-left-radius: 3px;
      border-top-right-radius: 3px;
    }

    .sub-menu li:last-child {
      border-bottom-left-radius: 3px;
      border-bottom-right-radius: 3px;
    }
    .left-align .el-select-dropdown__item {
      text-align: left !important;
      justify-content: flex-start !important;
      padding-left: 20px !important;
    }
    .bios-menu {
      padding: 12px 16px;
      .bios-media {
        display: flex;
        margin-bottom: 16px;
        .bios-method {
          margin-right: 24px;
          margin-top: 4px;
          white-space: nowrap;
        }
      }
    }

    .defined-key {
      width: 80px;
      height: 36px;
      border: 1px solid #c3c3c3;
      border-radius: 3px;
      margin: 1px;
    }

    .defined-key:focus {
      border: 1px solid #3bf;
    }

    .upload-menu {
      padding: 12px 16px;
    }
    .upload {
      display: flex;
      margin-bottom: 16px;
      .upload-folders {
        position: relative;
        width: 186px;
        :deep(.el-input) {
          .el-input__suffix .el-input__icon {
            margin-right: 0;
          }

          .el-input__inner {
            padding-top: 8px;
            padding-bottom: 8px;
          }
          .el-icon {
            color: #8d98aa;
          }
        }
        .number-error {
          color: red;
          font-size: 12px;
        }
      }
      .origin-input {
        display: none;
      }
      .showed-input {
        z-index: -1;
      }
    }

    .upload-text {
      margin-right: 24px;
      margin-top: 4px;
      white-space: nowrap;
    }

    .file-upload {
      width: 240px;
    }

    .custom-key {
      width: 82px;
    }

    .key-plus {
      margin: 0 2px;
      color: var(--o-text-color-tertiary);
      width: 8px;
    }

    .txt-box {
      display: flex;
      align-items: center;
    }

    .keyboard-btn {
      background: var(--o-bg-color-light);
      margin-top: 8px;
      padding: 16px;
      .bottom-btn {
        margin-top: 4px;
      }
      .key-button {
        margin-left: 4px;
        min-width: 80px;
        height: 32px;
      }

      .title {
        font-size: 12px;
        color: #8d98aa;
        letter-spacing: 0;
        line-height: 16px;
        margin-bottom: 8px;
      }
      .none-margin {
        margin-left: 0px;
      }
    }

    .keyboard-custom {
      .title {
        margin-top: 16px;
        height: 16px;
        line-height: 16px;
        font-size: 12px;
        color: #000000;
      }
      .btn-list {
        display: flex;
        flex-wrap: wrap;
        .custom-btn {
          margin-top: 8px;
          margin-right: 4px;
          display: flex;
          align-items: center;
          padding: 8px 16px;
          border-radius: 2px;
          background: #f4f6fa;
          font-size: 12px;
          color: #4e5865;
          line-height: 16px;
          border: 1px solid #f4f6fa;
          &:hover {
            border: 1px solid #0077ff;
          }
          :deep(.icon-x-solid) {
            margin-left: 8px;
            z-index: 2;
            left: 0;
            top: 0;
            font-size: 16px;
            color: rgba(141, 152, 170, 1);
            cursor: pointer;
          }
        }
      }
    }

    .select {
      color: #ffffff;
      background: var(--o-color-primary);
    }

    .cursor-hide {
      cursor: none;
    }

    .image {
      background: black;
      outline: none;
    }

    .status {
      width: 100%;
      line-height: 16px;
      margin: 16px 0;
    }

    .status-normal {
      display: block;
    }

    .status-full-screen {
      display: none;
    }
    .active-imgs {
      display: none;
      position: absolute;
      top: 24px;
      left: 24px;
      text-align: center;
      background: black;
      z-index: 1;
      justify-content: center;
      align-items: center;
      width: 1024px;
      height: 768px;
      &.active-full-screen {
        width: 100%;
        height: 100%;
      }
      .active-img {
        .active-img-host {
          color: #8d98aa;
          font-size: 12px;
          line-height: 16px;
          margin: 16px 0;
        }
      }
    }

    .status-info {
      margin-left: 24px;
      float: right;
    }

    .status-info2 {
      float: left;
      margin-left: 24px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }

    .status-info3 {
      float: left;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
    .host-info {
      display: inline-block;
      .host-status {
        display: flex;
        .host {
          margin: 0 8px;
          .active-host {
            display: none;
          }
          .idle-host {
            display: none;
          }
        }
      }
    }

    #slider_definition {
      width: 160px;
      display: inline-block;
      margin: 4px 16px;
    }
    .vedioResolution {
      display: inline-block;
      line-height: 16px;
      color: #ffffff;
      margin-top: 12px;
    }
    .vedioResolution-down {
      float: left;
    }
    .vedioResolution-up {
      float: right;
    }

    .btn-op {
      min-width: 64px;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .file-button {
      margin-left: 8px;
      min-width: 80px;
      height: 32px;
    }

    /*button在disabled状态下谷歌和edge浏览器无法监听到标签上的事件，将button内容放在span标签中，用span充满button*/
    .btn-text {
      display: inline-block;
      width: 100%;
      height: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .tool-bar-resolution-slider {
      float: right;
      top: 24px;
      position: relative;
      display: flex;
    }

    .main-menu {
      float: left;
      margin-top: 36px;
    }
  }

  // 全屏工具栏展开样式
  .expand-content {
    .el-icon {
      margin-left: calc(50% - 12px);
    }
    .float-toolbar {
      padding-left: 200px;
      padding-right: 200px;
      width: 100%;
      height: 128px;
      background-color: #3e4551;
      left: 0;

      &.zh-language {
        @media screen and (max-width: 1440px) {
          border-left: 10px solid transparent;
          border-right: 10px solid transparent;
        }

        .vedioResolution-down {
          min-width: 30px;
        }
        .vedioResolution-up {
          min-width: 30px;
        }
      }
      &.ja-language {
        left: 0;
        width: 100%;
        @media screen and (max-width: 1280px) {
          border-left: 10px solid transparent;
          border-right: 10px solid transparent;
        }
        @media screen and (min-width: 1281px) and (max-width: 1600px) {
          border-left: 20px solid transparent;
          border-right: 20px solid transparent;
        }

        .tool-bar-resolution-slider {
          width: 348px;
        }
        @media screen and (max-width: 1366px) {
          .tool-bar-resolution-slider {
            width: 208px;
          }
        }
        @media screen and (min-width: 1367px) and (max-width: 1440px)  {
          .tool-bar-resolution-slider {
            width: 248px;
          }
        }
        @media screen and (min-width: 1441px) and (max-width: 1680px)  {
          .tool-bar-resolution-slider {
            width: 328px;
          }
        }
      }

      &.fr-language {
        left: 0;
        width: 100%;
        @media screen and (max-width: 1600px) {
          border-left: 10px solid transparent;
          border-right: 10px solid transparent;
        }

        .tool-bar-resolution-slider {
          width: 282px;
        }
        @media screen and (max-width: 1280px) {
          .tool-bar-resolution-slider {
            width: 208px;
          }
        }
        @media screen and (min-width: 1281px) and (max-width: 1366px) {
          .tool-bar-resolution-slider {
            width: 248px;
          }
        }
        @media screen and (min-width: 1367px) and (max-width: 1440px) {
          .tool-bar-resolution-slider {
            width: 268px;
          }
        }
      }

      &.ru-language {
        left: 0;
        width: 100%;
        @media screen and (max-width: 1600px) {
          border-left: 10px solid transparent;
          border-right: 10px solid transparent;
        }

        .tool-bar-resolution-slider {
          width: 288px;
        }
        @media screen and (max-width: 1280px) {
          .tool-bar-resolution-slider {
            width: 208px;
          }
        }
        @media screen and (min-width: 1281px) and (max-width: 1366px) {
          .tool-bar-resolution-slider {
            width: 248px;
          }
        }
        @media screen and (min-width: 1367px) and (max-width: 1440px)  {
          .tool-bar-resolution-slider {
            width: 268px;
          }
        }
      }

      &.en-language {
        @media screen and (max-width: 1366px) {
          border-left: 10px solid transparent;
          border-right: 10px solid transparent;
        }
        @media screen and (min-width: 1367px) and (max-width: 1600px) {
          border-left: 20px solid transparent;
          border-right: 20px solid transparent;
        }
        .tool-bar-resolution-slider {
          width: 264px;
        }
        @media screen and (max-width: 1280px) {
          .tool-bar-resolution-slider {
            width: 204px;
          }
        }
        @media screen and (min-width: 1281px) and (max-width: 1440px) {
          .tool-bar-resolution-slider {
            width: 244px;
          }
        }
      }
    }
    
    @media screen and (max-width: 1280px) {
      .float-toolbar {
        padding-left: 24px;
        padding-right: 24px;
      }
      .main-menu > li {
        width: 60px !important;
        span {
          font-size: 8px !important;
        }
      }
    }
    @media screen and (min-width: 1281px) and (max-width: 1366px) {
      .float-toolbar {
        padding-left: 24px;
        padding-right: 24px;
      }
      .main-menu > li {
        width: 60px !important;
        span { 
          font-size: 8px !important;
        }
      }
    }
    @media screen and (min-width: 1367px) and (max-width: 1500px) {
      .float-toolbar {
        padding-left: 40px;
        padding-right: 40px;
      }
      .main-menu > li {
        width: 60px !important;
        span {
          font-size: 8px !important;
        }
      }
    }
    @media screen and (min-width: 1501px) and (max-width: 2010px) {
      .float-toolbar {
        padding-left: 90px;
        padding-right: 90px;
      }
      .main-menu > li {
        width: 60px !important;
        span {
          font-size: 10px !important;
        }
      }
    }

    .float-toolbar-panel {
      height: 128px;
      bottom: 40px;
    }

    .main-menu {
      margin-top: 40px;
    }

    .main-menu > li {
      margin-right: 20px;
      width: 77px;
      height: 52px !important;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      &:last-of-type {
        margin-right: 0;
      }
      .expand-title {
        display: block;
        color: #ffffff;
        font-size: 12px;
        line-height: 16px;
        text-align: center;
        margin-top: 8px;
      }
    }

    .expand-button {
      top: 128px;
    }

    .tool-bar-resolution-slider {
      position: relative;
      top: 44px;
      width: 240px;
    }
    @media screen and (max-width: 1280px) {
      .tool-bar-resolution-slider {
        width: 200px;
      }
    }

    .sub-menu {
      top: calc(50% + 12px);
    }
  }
}
</style>
